<%@page import="com.entity.Cart"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>买买买！我喜欢</title>
<script src="/ProfessionalDesign/js/jquery.min.js"></script>
<link href="/ProfessionalDesign/css/bootstrap.min.css" rel="stylesheet">
<link href="/ProfessionalDesign/css/pay.css" rel="stylesheet">
<!-- 导入bootstrap -->
<!-- 导入JQuery方便使用ajax插件 -->
<script src="/ProfessionalDesign/js/bootstrap.min.js"></script>
<!-- 导入bootstrap核心js文件 -->
</head>
<!-- 背景使用的是淘宝的链接图片 -->
<body style="background: transparent;">
	<!-- 头部导航栏 -->
	<nav class="navbar navbar-default navbar-static-top"
		style="margin-bottom: 0px;">
	<div class="container-fluid">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle" data-toggle="collapse"
				data-target="#myNavbar">
				<span class="icon-bar"></span> <span class="icon-bar"></span> <span
					class="icon-bar"></span>
			</button>
			<c:if test="${user.username!=null}">
				<a class="navbar-brand" id="top"
					style='padding-left: 300px; color: red'
					href="/ProfessionalDesign/login">尊贵的用户"${user.username}"欢迎您</a>
			</c:if>
			<c:if test="${user.username==null}">
				<a class="navbar-brand" id="top"
					style='padding-left: 300px; color: red'
					href="/ProfessionalDesign/login">亲，请登录</a>
			</c:if>

		</div>
		<div class="collapse navbar-collapse" id="myNavbar">
			<ul class="nav navbar-nav" style="padding-left: 100px">
				<li><a id="spc1" href="sign">免费注册</a></li>
				<li><a id="spc2" href="javascript:subToHP()">购物主页</a></li>
				<li class="dropdown"><a href="#" class="dropdown-toggle"
					data-toggle="dropdown" role="button" aria-haspopup="true"
					aria-expanded="false">我的<span class="caret"></span></a>
					<ul class="dropdown-menu">
						<li><a href="javascript:subToHX();">我的信息</a></li>
						<li><a href="#">订单信息</a></li>
						<li><a href="#">联系客服</a></li>
					</ul></li>
				<li class="dropdown"><a href="#" class="dropdown-toggle"
					data-toggle="dropdown" role="button" aria-haspopup="true"
					aria-expanded="false">购物车 <span class="caret"></span></a>
					<ul class="dropdown-menu">
						<li><a href="#">Action</a></li>
						<li><a href="#">Another action</a></li>
						<li><a href="#">Something else here</a></li>
						<li role="separator" class="divider"></li>
						<li class="dropdown-header">Nav header</li>
						<li><a href="#">Separated link</a></li>
						<li><a href="#">One more separated link</a></li>
					</ul></li>
				<li class="dropdown"><a href="#" class="dropdown-toggle"
					data-toggle="dropdown" role="button" aria-haspopup="true"
					aria-expanded="false">收藏夹 <span class="caret"></span></a>
					<ul class="dropdown-menu">
						<li><a href="#">收藏的店铺</a></li>
						<li><a href="#">收藏的商品</a></li>
					</ul></li>
			</ul>
			<ul class="nav navbar-nav navbar-right" style="padding-right: 300px">
				<li class="active"><a href="../navbar/">商品分类</a></li>
				<li class="dropdown"><a href="#" class="dropdown-toggle"
					data-toggle="dropdown" role="button" aria-haspopup="true"
					aria-expanded="false">商家中心<span class="caret"></span></a>
					<ul class="dropdown-menu">
						<li><a href="#">已卖出的宝贝</a></li>
						<li><a href="#">免费开店</a></li>
					</ul></li>
			</ul>
		</div>
	</div>
	</nav>
	<div class="container" style="width: auto">
		<!-- 标题和右侧显示 -->
		<div class="row clearfix">
			<div class="col-md-12 column">
				<div style="display: flex; margin-top: -7px; margin-left: 200px;">
					<h1 style="display: flex;">
						<a href="javascript:subToHP()"
							style="color: #FF7F00; font-family: '华文新魏'; font-size: 54px; text-decoration: none; width: 113px">地猫</a>
						<a href="javascript:subToHP()"
							style="color: #FF7F00; padding-top: 15px; font-family: '华文新魏'; font-size: 32px; text-decoration: none">Dmall.com</a>
					</h1>
					<div>
						<ul class="topul">
							<li class="topli"><div class="topdiv0">
									<div class="topdiv">1</div>
									<div class="topdiv2">查看购物车</div>
								</div>
								<div class="departline"></div></li>
							<li class="topli"><div class="topdiv0">
									<div class="topdiv">2</div>
									<div class="topdiv2">拍下商品</div>
								</div>
								<div class="departline"></div></li>
							<li class="topli"><div class="topdiv0">
									<div class="topdiv1">3</div>
									<div class="topdiv2">付款</div>
								</div>
								<div class="departline"></div></li>
							<li class="topli"><div class="topdiv0">
									<div class="topdiv">4</div>
									<div class="topdiv2">确认收货</div>
								</div>
								<div class="departline"></div></li>
							<li class="topli"><div>
									<div class="topdiv">5</div>
									<div class="topdiv2">评论与售后</div>
								</div></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<!-- 选择电话地址，提交订单 -->
		<div class="row clearfix"
			style="background-color: white; border-top: inset; border-top-width: 1px;">
			<div class="col-md-2 column"></div>
			<!-- 选择电话地址 -->
			<div class="col-md-8 column">
<!-- 			maView.addObject("user", user);//用户信息
			maView.addObject("orders", orders);//订单信息
				private int order_id;
				private int user_id;
				private Date order_time;
				private String order_state;//订单状态
				private String order_add;
				private String username;
				private String tel;
			maView.addObject("sum", sum);//总价 -->
				<br> <strong>确认支付信息</strong>
				<div style="position:relative">
				<ul id="ordul">
					<li><div>订单流水号:&nbsp</div><div>${orders.order_id}</div></li>	
					<li><div>下单时间:&nbsp</div><div>${time}</div></li>	
					<li><div>订单状态:&nbsp</div><div>${orders.order_state}</div></li>	
					<li><div>收货地址:&nbsp</div><div>${orders.order_add}</div></li>	
					<li><div>收货人:&nbsp</div><div>${orders.username}</div></li>	
					<li><div>联系电话:&nbsp</div><div>${orders.tel}</div></li>	
					<li><div>订单总价:&nbsp</div><div>${sum}</div></li>	
				</ul>
				<ul style="margin-left:300px">
				<button class="btn btn-default" onclick="cancel()">取消订单</button>
				<button style="margin-left:10px" class="btn btn-danger" onclick="pay()">支付</button>
				</ul>
				</div>
			</div>
			<div class="col-md-2 column"></div>
			<br>
		</div>
	</div>
	<!-- 底部框 -->
	<div class="jumbotron text-center"
		style="margin-top: 40px; margin-bottom: 0; background-color: white;border-top-color: #333333;border-top-width: 1px;border-top-style: solid;">
		<br>
		<p>© 2022 ProfessionalDesign.com 版权所有</p>
		<a>关于我们</a>| <a>合作伙伴</a>| <a>营销中心</a>| <a>联系客服</a>| <a>开放平台</a>| <a>诚征英才</a>|
		<a>联系我们</a>| <a>网站地图</a>| <a>法律声明及隐私权政策</a>
	</div>
</body>
<script>
$(document).ready(function(){
	if(${user==null}){
		$("a").attr("href","${pageContext.request.contextPath}/login");
		$("#spc2").attr("href","javascript:subToHP()");
		$("#spc1").attr("href","sign");
	}
});
function subToHX(){
	var form = $("<form>"); //定义一个form表单  
	form.attr('style', 'display:none'); //在form表单中添加查询参数  
	form.attr('method', 'post');
	form.attr('action', "toUserInfo");
	form.append('<input type="text" name="userid" value="${user.userid}">');
	$('body').append(form); //将表单放置在web中  
	form.submit(); //表单提交
};
$('.carousel').carousel({
    interval: 2000
});
function subToHP(){
	if(${user!=null}){
		var form = $("<form>"); //定义一个form表单  
	form.attr('style', 'display:none'); //在form表单中添加查询参数  
	form.attr('method', 'post');
	form.attr('action', "homepage");
	form.append('<input type="text" name="userid" value="${user.userid}">');
	form.append('<input type="password" name="pwd" value="${user.pwd}">');
	$('body').append(form); //将表单放置在web中  
	form.submit(); //表单提交
	}
	else{
		window.location.href="homepage";
	}
};
function pay(){
	var sum=parseFloat("${sum}");
	var payOdr={"userid":${user.userid},"sum":sum,"orderid":${orders.order_id}};
	console.log(payOdr);
	 $.ajax({
			url: '/ProfessionalDesign/payodr',
			type: 'post',
			headers:{'Content-Type': 'application/json'},//设置请求头
			/* dataType:'json', */
			data: JSON.stringify(payOdr),
			success: function(response) {
				$('#ordul').find('li').eq(2).find('div').eq(1).html('已支付');
				 alert(response);
			},error:function(){
				alert("提交订单过程中出错！请一会儿再试");
			}
		}); 
}
function cancel(){
	 $.ajax({
			url: '/ProfessionalDesign/canodr',
			type: 'post',
			data: 'order_id='+${orders.order_id},
			success: function(response) {
				if(response=='订单取消成功，即将返回主页！'){
					alert(response);
					$('#ordul').find('li').eq(2).find('div').eq(1).html('已取消');
				}else{
					alert(response);
				}
			},error:function(){
				alert("提交订单过程中出错！请一会儿再试");
			}
		}); 
}
</script>
</html>